<ui:composition template="../templates/3-layoutTemplate.xhtml" xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:c="http://java.sun.com/jsp/jstl/core">

    <ui:define name="content-middle">

        <div align="center" >
            <h:form id="questionBoardForm">
                <p:remoteCommand name="onPageLoad" action="#{questionBoardBean.getQuestions}"
                                 autoRun="true" update=":formQuestionTab:quetionsTabView,:statisticsPanel">
                </p:remoteCommand>
            </h:form>    
            <div align="center" style="width:1070px; height: 600px; border: 0px solid #036fab;">
                <div style="float:left;width:800px; min-height: 300px; border: 0px solid #036fab;padding: 5px;">
                    <h:form>
                        <div style="float: left;margin-bottom: 5px;">
                            <p:commandButton process ="@form" ajax="true" value="Refer Formula" style="width:130px;height: 30px;" actionListener="#{questionBoardBean.showFormula}">
                                <p:ajax event="dialogReturn" />
                            </p:commandButton>

                            <p:commandButton process ="@form" ajax="true" value="Show Reference" style="width:130px;height: 30px;" actionListener="#{questionBoardBean.showReference}">
                                <p:ajax event="dialogReturn" />
                            </p:commandButton>
                        </div>
                        <div style="float: right;">
                            <p:commandButton process ="@form" ajax="true" value="Review Questions" style="height: 30px;" actionListener="#{questionBoardBean.reviewQuestions}">
                            </p:commandButton>
                            <p:commandButton process ="@form" ajax="true" value="Submit Your Answers Now" style="height: 30px;" actionListener="#{questionBoardBean.submitAnswers}">
                            </p:commandButton>
                        </div>
                    </h:form>
                    <div style="clear: both;margin: 5px;"></div>
                    <div style="border: 0px solid #AFAFAF; min-height: 250px;">
                        <h:form id="formQuestionTab">  
                            <p:tabView id="quetionsTabView" value="#{questionBoardBean.questionsList}" var="qn">  

                                <p:tab id="questionsTab" title="#{qn.rownum}">
                                    <h:form>
                                    <div style="min-height: 320px;"> 

                                        <div style="padding-bottom: 10px;border-bottom: 1px solid #DC8700;">
                                            #{qn.question}
                                        </div>
                                        <div style="float:left;padding: 10px 0px 10px 0px;min-height: 100px;border: 0px solid;">
                                            <h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5" > 
                                                <p:selectOneRadio value="#{questionBoardBean.selectedOption}" layout="grid" columns="2"> 
                                                    <f:selectItem itemLabel="#{qn.option1}" itemValue="a" />
                                                    <f:selectItem itemLabel="#{qn.option2}" itemValue="b" />
                                                    <f:selectItem itemLabel="#{qn.option3}" itemValue="c" />
                                                    <f:selectItem itemLabel="#{qn.option4}" itemValue="d" />
                                                    <f:selectItem itemLabel="#{qn.option5}" itemValue="e" />
                                                    <p:ajax event="change" listener="#{questionBoardBean.markAnswer}" />
                                                </p:selectOneRadio>
                                            </h:panelGrid>
                                            

                                            
                                        </div>
                                        <div style="clear: both;margin: 5px;"></div>

                                        <div style="float:left;font-size:1.6em;color: #ffffff; border: 1px solid #AFAFAF; height:20px;padding:5px;background: #AFAFAF;">
                                            <p:selectBooleanCheckbox value="" /> <p:spacer width="5" /> Mark this question for review
                                        </div>                                            
                                    </div > 
                                    </h:form>
                                </p:tab>

                            </p:tabView> 
                                                                        <p:selectOneRadio  value="#{questionBoardBean.selectedOption}">  
                                                <f:selectItem itemLabel="Option 1" itemValue="Option 1" />  
                                                <f:selectItem itemLabel="Option 2" itemValue="Option 2" />  
                                                <f:selectItem itemLabel="Option 3" itemValue="Option 3" />  
                                                <p:ajax event="change" listener="#{questionBoardBean.markAnswer}" />
                                            </p:selectOneRadio>
                        </h:form>  
                    </div>

                    <div style="border: 0px solid #AFAFAF; height:200px; text-align: left;margin-top: 5px;">
                        <p:panel header="Quick Instructions" footer="All the best">  
                            <table width="100%">
                                <tr><td><h:outputText value="To refer to any formula associated with question, click on Refer Formula" /> </td></tr>
                                <tr><td><h:outputText value="For refereing to open book, click on Show Reference" /></td></tr>
                                <tr><td><h:outputText value="At anypoint in time, if you want to review the question marked for review, click review questions" /></td></tr>
                            </table>
                        </p:panel>
                    </div>
                </div>

                <div style="float:right;width:250px; height: 500px; border: 0px solid #036fab; text-align: left; padding: 5px;">

                    <p:panel id="statisticsPanel" header="Statistics" style="height: 550px;">  
                        <div style="border: 1px solid #AFAFAF; height:25px;margin-bottom: 5px;padding: 10px;">
                            <div style="float:left;width:200px;font-size:1.5em;text-align: center;">
                                Test Type: General
                            </div>
                        </div>
                        <div style="border: 1px solid #DC8700; height:200px;margin-bottom: 5px;padding: 10px;">
                            You are left with
                            <div style="float:left; padding:10px 10px 10px 10px;margin:5px 0px 5px 0px;width:200px;font-size:10em;text-align: center;">
                                22
                            </div>
                        </div>
                        <div style="border: 1px solid #AFAFAF; height:100px;padding: 10px;">
                            <table width="100%">
                                <tr><td>Total Questions</td><td><h:outputText id="outTotalQuestions" value="#{questionBoardBean.totalQuestionsCount}" /></td></tr>
                                <tr><td>Attempted to Answer</td><td><h:outputText id="outAttemptedAnswerCount" value="#{questionBoardBean.attemptedAnswerCount}" /></td></tr>
                                <tr><td>Unanswered</td><td><h:outputText id="outUnAnsweredQuestionsCount" value="#{questionBoardBean.unAnsweredQuestionsCount}" /></td></tr>
                                <tr><td>Marked for Review</td><td><h:outputText id="outQuestionsMarkedForReview" value="#{questionBoardBean.questionsMarkedForReview}" /></td></tr>
                            </table>
                        </div>

                    </p:panel> 
                </div> 



            </div>       
        </div>

    </ui:define>

</ui:composition>